<template>
	<!-- 首页 -->
	<view>
		<!-- 顶部区域 -->
		<view class="topmain">
			<image src="/static/images/newimage//beijing.jpg" class="topmainbg"></image>
			<view class="topnav">
				<!-- <view class="top">
					<image src="/static/images/home/xinxuanhezi_white.png" class="icon"></image>
					<text>正品保证 三件包邮</text>
					<image src="/static/images/home/help.png" class="help"></image>
					<image src="/static/images/home/kefu.png" class="kefu" @click="toService()"></image>
				</view> -->
				<!-- <view class="warning">
					<image src="/static/images/home/horn.png" class="icon"></image>
					<text class="warntext">
						商品抽奖存在概率，付费请谨慎，商品不喜欢可回收。    
					</text>
					<navigator class="helptext" url="/pages/index/proposal">常见问题</navigator>
					<text class="kefutext" @click="toService()">在线客服</text>
				</view> -->
				<!-- 滚动消息 -->
				<danmu :danmuList="notice" />
				<view class="info">
					<view class="info_list">
						<view class="tool" @click="toCoupon()">
							<!-- <text class="tool_tag">{{couponNum || 0}}</text> -->
							<image src="/static//images/newimage//youhuiquan.png"></image>
							<!-- <view class="" style="background-color: #0072FF; width:20rpx;height: 20rpx;" ></view> -->
							<!-- <text>优惠券</text> -->
						</view>
						<view class="tool" @click="toAgaincoupon()">
							<!-- <text class="tool_tag">{{againcouponNum || 0}}</text> -->
							<image src="/static/images//newimage//chouka.png"></image>
							<!-- <text>重抽卡</text> -->
						</view>
						<view class="tool" @click="toOuqibang()">
							<image src="/static/images//newimage//ouqibang.png" style="width: 56rpx;height: 56rpx;"></image>
							<!-- <text>欧气榜</text> -->
						</view>
						<view class="tool" @click="toChengjiu()">
							<image src="/static/images//newimage//chengjiu.png"></image>
							<!-- <text>成就</text> -->
						</view>
					</view>
				
					<!-- <view class="info_left">
						<view class="tool" @click="toCoupon()">
							<text class="tool_tag">{{couponNum || 0}}</text>
							<image src="/static//images/newimage/优惠券.png"></image>
							<text>优惠券</text>
						</view>
						<view class="tool" @click="toAgaincoupon()">
							<text class="tool_tag">{{againcouponNum || 0}}</text>
							<image src="/static/images//newimage/抽卡.png"></image>
							<text>重抽卡</text>
						</view>
						
					</view> -->
					<view class="leftbtn" @click="lr(1)">
						<image src="/static/images//newimage//youanniu.png"></image>
						
					</view>
					<overlay title="盲盒玩法规则" :content="ruleInfo" ref="overlay" />
					<!-- <view class="info_right">
						<view class="tool" @click="toOuqibang()">
							<image src="/static/images//newimage/欧气榜.png" style="width: 56rpx;height: 56rpx;"></image>
							<text>欧气榜</text>
						</view>
						<view class="tool" @click="toChengjiu()">
							<image src="/static/images//newimage/成就.png"></image>
							<text>成就</text>
						</view>
					</view> -->
					
					<view class="rightbtn" @click="lr(2)">
						<image src="/static/images//newimage//zuoanniu.png"></image>
					
					</view>
				</view>
				
				<view class="mainpic">
					<image :src="goodsList[current].cover_image" class="mainpic_img" @click="seemore"></image>
				</view>
				
				<image src="/static/images/newimage/shouzhi.png" class="mainpic_seegoods" @click="seemore"></image>
				<view class="playbtn" @click="demo">
				
					<image src="/static/images//newimage//shiwan.png" class="bgborder"></image>
					</view>
					<view class="rule" @click="showRule">
						<image src="/static/images/newimage/shuoming.png"></image>
						<!-- <text>玩法说明</text> -->
				</view>
				<view class="energy">
					<view class="energy_nengliang">
						<image src="/static/images//newimage//zhanshi.png"></image>
					</view>
					<view class="price">¥{{goodsList[current].first_blood}}元/个</view>
					<!-- <view class="energy_progress"></view> -->
				</view>
				<!-- <view class="risktip1">积满能量值100%获得史诗及以上商品</view> -->
				<view class="goodsprice"></view>
				<swiper :current="oldCurrent" class="goodsSwiper" display-multiple-items="3" previous-margin="80rpx" next-margin="80rpx" circular @change="bannercg">
					<swiper-item v-for="(item,index) in goodsList" :key="index" @click="setCurrent(index)" :class="{'active': current === index}">
						<view class="swiper-item">
							<image :src="item.cover_image"></image>
							<text>{{item.name}}</text>
						</view>
					</swiper-item>
				</swiper>
				<view class="box">
					<navigator class="box_more" open-type="switchTab" url="/pages/blindbox/blindbox">
						<image src="/static/images//morebox.gif"></image>
						<!-- <text>更多盲盒</text> -->
					</navigator>
					<view class="box_openbtn" @click="openbox()">
						<image src="/static/images//openbox.gif"></image>
					</view>
				</view>
				<!-- <view class="risktip2">回收比例约为70% 心愿币不支持提现</view>
				<view class="buytip">
					<image src="/static/images/blindbox/checked.png" v-if="isBuytip" @click="isBuytip = false"></image>
					<image src="/static/images/blindbox/check.png" v-else @click="isBuytip = true"></image>
					<text @click="isBuytip = !isBuytip">未成年人需在监护人陪同下购买商品，抽奖存在概率性，付费请谨慎。</text>
				</view> -->
			</view>
		</view>
		<!-- 全部商品 -->
		<u-popup v-model="showMoregoods" mode="bottom" border-radius="36" :mask-close-able="false">
			<view class="all">
				<view class="allgoods">
					<view class="allgoods_title">全部商品</view>
					<view class="allgoods_close" @click="hideMoregoods">X</view>
					<view class="allgoods_tag">
						<text style="background-color: #9D403E;" @click="changeLevel(0)">全部</text>
						<text class="chuanshuo" @click="changeLevel(1)">传说</text>
						<text class="shishi" @click="changeLevel(2)">史诗</text>
						<text class="xiyou" @click="changeLevel(3)">稀有</text>
						<text class="putong" @click="changeLevel(4)">普通</text>
					</view>
				</view>
				<view class="goodslist" style="margin-top: 240rpx;padding-bottom: 150rpx;background-color: #F5F5F5;">
					<view class="goods" v-for="(item,index) in filterGoodslist" :key="index" @click="toDetail(item.goods_id)">
						<view class="goods_tag" :class="item.type==4?'putong':item.type==3?'xiyou':item.type==2?'shishi':item.type==1?'chuanshuo':''">{{item.type | tag}}</view>
						<image :src="item.cover_image" class="goods_pic"></image>
						<view class="goods_price">{{item.goods_price}}元</view>
						<view class="goods_title">
							<text>{{item.goods_name}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="prob">
				<view class="prob_title">各款式商品抽中概率</view>
				<view class="prob_probability">
					<view class="prob_probability_item" style="color: #FF7700;">
						<view class="prob_probability_item_text">传说款</view>
						<view class="prob_probability_item_num">{{energyInfo.virtual_legend_probability || 0}}%</view>
					</view>
					<view class="prob_probability_item" style="color: #FE1F08;">
						<view class="prob_probability_item_text">史诗款</view>
						<view class="prob_probability_item_num">{{energyInfo.virtual_epic_probability || 0}}%</view>
					</view>
					<view class="prob_probability_item" style="color: #742AFF;">
						<view class="prob_probability_item_text">稀有款</view>
						<view class="prob_probability_item_num">{{energyInfo.virtual_rare_probability || 0}}%</view>
					</view>
					<view class="prob_probability_item" style="color: #0072FF;;">
						<view class="prob_probability_item_text">普通款</view>
						<view class="prob_probability_item_num">{{energyInfo.virtual_normal_probability || 0}}%</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 活动弹窗 -->
		<activity-popup :isShowActivityPopup="isShowActivityPopup" :data="activityPopupInfo" @closeActivityPopup="closeActivityPopup" />
		  
		  <yh-popup :isYhPopup="isYhPopup" :data="activityPopupInfo" @closeYhPopup="closeYhPopup" />
		<!-- <activity-popup :isShowActivityPopup="isShowActivityPopup" :data="activityPopupInfo" @closeActivityPopup="closeActivityPopup" /> -->
		<!-- 底部导航 -->
		<tabBar :currentPage="0" :messageNum="messageNum" />
	</view>
</template>

<script>
	import yhPopup from '@/components/yhPopup'
	import tabBar from '@/components/tabBar'
	import danmu from "@/components/danmu"
	import overlay from '@/components/overlay'
	import activityPopup from '@/components/activityPopup'
	export default {
		components:{
			tabBar,
			danmu,	
			overlay,
			activityPopup,
			yhPopup
		},
		data() {
			return {
				id:0,
				notice:[
					{
						avatar:'',
						goods_name:[],
						user_name:''
					}
				],//滚动公告
				filterGoodslist:[
					{
						cover_image:'',
						goods_name:''
					}
				],//当前活动所含全部商品列表-按等级筛选
				goodsList:[
					{
						first_blood:0,
						cover_image:''
					}
				],//盲盒列表
				curLevel:0,//当前选中的商品等级
				energyInfo:{},//盲盒活动能量buff和模拟概率
				ruleInfo:'',//盲盒玩法规则
				showMoregoods:false,//显示更多商品
				allowTap:true,//防误触
				timer:'',
				isBuytip:true,//是否同意未成年人购买提示
				oldCurrent: 0,//当前查看的盲盒索引
				current: 0,//当前查看的盲盒索引
				currentId:'',//当前查看的盲盒索引id
				accessId: 'b9f99880-f392-11ec-818d-a59265127335', // 接入号ID （参数类型：字符串，必传）
				clientId: '', //访客id
				urlTitle: '', //用户来源
				fromUrl: '', //用户来源
				otherParams: { //指定专属坐席和用户昵称以及发送商品链接
					nickName: ''
				},
				customField: { //自定义字段
					test: '在线客服自定义字段'
				},
				messageNum:0,
				couponNum:0,//可用优惠券数量
				againcouponNum:0,//可用重抽卡数量
				activityPopupInfo:{},//活动弹窗
				isShowActivityPopup:false,//是否显示活动弹窗
				isYhPopup:false,
			}
		},
		filters:{
			tag(v){
				switch(v){
					case 1:
						return '传说款'
					case 2:
						return '史诗款'
					case 3:
						return '稀有款'
					case 4:
						return '普通款'
					default:
						break
				}
			}
		},
		onLoad() {
			uni.showLoading({
				title:'加载中...'
			})
			this.getBlindboxlist();
			this.rollnotice();
			this.getIndexBlindboxrules();
			this.getIndexlogo();
			// this.getCouponnum();
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.lotteryinsert();
				this.getPaidorder();
			}
			this.timer = setInterval(()=>{
				this.rollnotice();
			},50000)
		},
		onHide() {
			clearInterval(this.timer);
		},
		onPullDownRefresh() {
			uni.showLoading({
				title:'加载中...'
			})
			this.getBlindboxlist();
		},
		methods: {
			//获取已付款待获取开盒结果的订单
			getPaidorder(){
				this.$api.paidorder().then(result=>{
					console.log("已付款待获取开盒结果的订单: ",result);
					if(result.all_num > 0){
						uni.showModal({
							title:'温馨提示',
							content:'您有已付款的盲盒未获取开盒结果，是否前往获取？',
							confirmText:'获取',
							success: (r) => {
								if(r.confirm){
									uni.navigateTo({
										url:'/pages/blindbox/blindbox_result?' + this.$url.urlEncode({
											activity_id:result.orders.activity_id,
											price:result.orders.pay,
											order_id:result.orders.order_id,
											open_method:result.orders.open_method
										})
									})
								}
							}
						})
					}
				})
			},
			//客服
			toService() {
				if(!uni.getStorageSync('token')){
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})
				}else{
					this.clientId = uni.getStorageSync('userId');
					this.otherParams.nickName = uni.getStorageSync('userName');
					let hrefAddress = 'https://ykf-webchat.7moor.com/wapchat.html?accessId=' + this.accessId + '&clientId=' +
						this.clientId + '&otherParams=' + JSON.stringify(this.otherParams) +
						'&urlTitle=派箱箱APP&fromUrl=https://mh.mytshop.cn/h5/&customField=' + JSON.stringify(this.customField);
					uni.navigateTo({
						url: '/pages/index/customerService?href=' + encodeURIComponent(hrefAddress)
					})
				}
			},
			//跳转优惠券
			toCoupon(){
				 if(!uni.getStorageSync('token')){
				 	uni.showModal({
				 		title: '温馨提示',
				 		content: '登录后可继续操作，是否登录？',
				 		success: (res) => {
				 			if (res.confirm) {
				 				uni.navigateTo({
				 					url: '/pages/login/login'
				 				})
				 			}
				 		}
				 	})
				 }else{
				 	uni.navigateTo({
				 		url: '/pages/mine/coupon/coupon'
				 	})
				 }
			},
			//跳转重抽卡
			toAgaincoupon(){
				 if(!uni.getStorageSync('token')){
				 	uni.showModal({
				 		title: '温馨提示',
				 		content: '登录后可继续操作，是否登录？',
				 		success: (res) => {
				 			if (res.confirm) {
				 				uni.navigateTo({
				 					url: '/pages/login/login'
				 				})
				 			}
				 		}
				 	})
				 }else{
				 	uni.navigateTo({
				 		url: '/pages/mine/prop/reextraction'
				 	})
				 }
			},
			//跳转欧气榜
			toOuqibang(){
				 if(!uni.getStorageSync('token')){
				 	uni.showModal({
				 		title: '温馨提示',
				 		content: '登录后可继续操作，是否登录？',
				 		success: (res) => {
				 			if (res.confirm) {
				 				uni.navigateTo({
				 					url: '/pages/login/login'
				 				})
				 			}
				 		}
				 	})
				 }else{
				 	uni.navigateTo({
				 		url: '/pages/blindbox/rankinglist'
				 	})
				 }
			},
			//跳转成就
			toChengjiu(){
				 if(!uni.getStorageSync('token')){
				 	uni.showModal({
				 		title: '温馨提示',
				 		content: '登录后可继续操作，是否登录？',
				 		success: (res) => {
				 			if (res.confirm) {
				 				uni.navigateTo({
				 					url: '/pages/login/login'
				 				})
				 			}
				 		}
				 	})
				 }else{
				 	uni.navigateTo({
				 		url: '/pages/blindbox/achievement'
				 	})
				 }
			},
			//跳转盲盒详情
			openbox(){
				if(!uni.getStorageSync('token')){
				 	uni.showModal({
				 		title: '温馨提示',
				 		content: '登录后可继续操作，是否登录？',
				 		success: (res) => {
				 			if (res.confirm) {
				 				uni.navigateTo({
				 					url: '/pages/login/login'
				 				})
				 			}
				 		}
				 	})
				}else{
				 	uni.navigateTo({
				 		url: `/pages/index/extractionBlindbox?id=${this.goodsList[this.current].id}`
				 	})
				}
			},
			//获取首页弹窗海报
			getIndexlogo(){
				this.$api.getIndexlogo().then(res=>{
					this.activityPopupInfo = res;
					if(res.poster!=''){
						// this.isShowActivityPopup = true;
						this.isYhPopup =  true;
					}
				})
			},
			//关闭活动弹窗
			closeActivityPopup(){
				this.isShowActivityPopup = false;
			},
			closeYhPopup(){
			    this.isYhPopup = false;
			    this.isShowActivityPopup = true;
			   },
			//获取优惠券、重抽卡数量
			getCouponnum(){
				this.$api.couponnum().then(res=>{
					this.couponNum = res.coupon_num;
					this.againcouponNum = res.again_coupon_num;
				})
			},
			getMyindex(){
				this.$api.myindex().then(res=>{
					this.messageNum = res.message_num;
					uni.setStorageSync('userName',res.user.user_name);
					uni.setStorageSync('userId',res.user.id);
				})
			},
			//增加抽奖等相关记录
			lotteryinsert(){
				this.$api.lotteryinsert().then(res=>{
					this.getMyindex();
				});
			},
			
			
			//获取盲盒列表
			getBlindboxlist(){
				this.$api.activityList({
					offset:1,
					activity_category_id:0
				}).then(res=>{
					this.goodsList = res;
					if(this.goodsList.length>1){
						this.current = 1;
					}
					this.currentId = this.goodsList[this.current].id;
					this.getGoodsList();
					this.getEnergy();
				})
			},
			//获取盲盒全部商品
			getGoodsList(){
				this.$api.indexMoregoods({
					activity_id:this.currentId,
					type:this.curLevel
				}).then(res=>{
					uni.stopPullDownRefresh();
					uni.hideLoading();
					this.filterGoodslist = res;
				})
			},
			//获取盲盒活动能量buff和模拟概率
			getEnergy(){
				this.$api.energy({activity_id:this.currentId}).then (res=>{
					this.energyInfo = res;
				})
			},
			//查看更多商品
			seemore(){
				this.showMoregoods = true;
			},
			//跳转商品详情
			toDetail(id){
				uni.navigateTo({
					url:`/pages/mall/goodsDetail?id=${id}`
				})
			},
			//按商品等级查看
			changeLevel(e){
				this.curLevel = e;
				this.currentId = this.goodsList[this.current].id;
				this.$api.indexMoregoods({
					activity_id:this.goodsList[this.current].id,
					type:this.curLevel
				}).then(res=>{
					uni.hideLoading();
					this.filterGoodslist = res;
				})
			},
			//隐藏更多商品弹框
			hideMoregoods(){
				this.showMoregoods = false;
				this.changeLevel(0);
			},
			//获取滚动公告
			rollnotice(){
				this.$api.rollnotice().then(res=>{
					this.notice = res;
				})
			},
			//获取盲盒玩法规则
			getIndexBlindboxrules(){
				this.$api.indexBlindboxrules({activity_id:this.id}).then(res=>{
					if(res!=null){
						this.ruleInfo = res.rules;
					}
				})
			},
			//显示盲盒玩法规则
			showRule(){
				this.$refs.overlay.show();
			},
			bannercg({detail:{current}}){
				if(current === this.goodsList.length - 1){
					this.current = 0;
				}else{
					this.current = current + 1;
				}
			},
			//切换查看盲盒详情
			setCurrent (data) {
				this.current = data;
				let index = this.current - 1
				this.oldCurrent = index < 0?this.goodsList.length-1:index
				console.log(this.current);
				console.log(this.oldCurrent);
				this.getGoodsList();
				this.getEnergy();
			},
			//左右点击按钮
			lr(num){
				console.log("haha")
			    // 1 左侧 2 右侧
			    if(num==1){
			     this.oldCurrent=this.oldCurrent-1 <0 ? this.goodsList.length-1:this.oldCurrent-1
			     this.current=this.oldCurrent;
			    }else{
			     this.oldCurrent = this.current
			    }
			},
			   
			//试玩
			demo(){
				if(!this.allowTap) return
				this.allowTap = false;
				setTimeout(()=>{
					this.allowTap = true;
				},1000)
				uni.setStorageSync('blindboxId',this.currentId);
				uni.navigateTo({
					url:'/pages/blindbox/blindbox_result?' + this.$url.urlEncode({
						activity_id:this.currentId,
						price:this.goodsList[this.current].first_blood,
						order_id:0,
						open_method:3
					})
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	padding-bottom: 30rpx;
}
/deep/.danmus{
	top: 200rpx !important;
}
.topmain{
	width: 750rpx;
	height: calc(var(--status-bar-height) + 1700rpx);
	position: relative;
	
	.topmainbg{
		@include img;
	}
}
.topnav{
	width: 750rpx;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	padding-top: 100rpx;
	
	.top{
		@include align-end;
		
		.icon{
			width: 158rpx;
			height: 40rpx;
			margin-left: 24rpx;
		}
		text{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-left: 16rpx;
		}
		.help{
			width: 48rpx;
			height: 48rpx;
			margin-left: 116rpx;
		}
		.kefu{
			width: 48rpx;
			height: 48rpx;
			margin-left: 64rpx;
		}
	}
	.warning{
		@include align-start;
		margin-top: 6rpx;
		
		.icon{
			width: 44rpx;
			height: 44rpx;
			margin-left: 28rpx;
		}
		.warntext{
			width: 350rpx;
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 28rpx;
			margin-left: 18rpx;
		}
		.helptext{
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-left: 75rpx;
		}
		.kefutext{
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-left: 24rpx;
		}
	}
	.info{
		position: relative;
		.info_list{
			display: flex;
			flex-direction: row;
			width: 100%;
		}
		.info_left{
			width: 117rpx;
			padding: 24rpx 0;
			position: absolute;
			top: 100rpx;
			left: 0;
			
		}
		.info_right{
			width: 117rpx;
			padding: 24rpx 0;
			position: absolute;
			top: 112rpx;
			right: 0;
		}
		.tool{
			@include column-center;
			margin-left: 30rpx;
			// margin-top: 40rpx;
			// position: relative;
			
			&:first-child{
				margin-top: 0;
			}
			image{
				width: 65rpx;
				height: 65rpx;
			}
			text{
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
			&_tag{
				width: 32rpx;
				height: 32rpx;
				background: #FF3B30;
				border-radius: 50%;
				box-shadow: 0 2rpx 4rpx 0 rgba(255,59,48,0.3);
				font-size: 22rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				@include center;
				position: absolute;
				top: 0;
				right: 0;
				transform: translateX(-50%);
				z-index: 999;
			}
		}
	}
	.mainpic{
		text-align: center;
		margin-top: 60rpx;
		transform: scale(0.8);
		
		&_img{
			width: 430rpx;
			height: 430rpx;
			animation: picWobble 3s infinite linear;
		}
		@keyframes picWobble {
			0% {
				transform: translateY(0);
			}
			50%{
				transform: translateY(30rpx);
			}
			100%{
				transform: translateY(0rpx);
			}
		}
	}
	.mainpic_seegoods{
		  width: 76rpx;
		  height: 76rpx;
		  z-index: 20;
		position: absolute;
		top: 600rpx;
		right: 202rpx;
		animation: seeWobble 3s infinite linear;
		
		@keyframes seeWobble {
			0% {
				transform: translate(0,0);
			}
			50%{
				transform: translate(30rpx,30rpx);
			}
			100%{
				transform: translate(0,0);
			}
		}
	}
	.leftbtn
	{
		position: absolute;
		top: 310rpx;
		right: 90rpx;
		z-index: 9;
		image{
			width: 50rpx;
			height: 50rpx;
		}
	}
	.rightbtn
	{
		position: absolute;
		top: 310rpx;
		left: 90rpx;
		z-index: 9;
		@include column-center;
		
		image{
			width: 50rpx;
			height: 50rpx;
		}
	}
	.playbtn{
		position: absolute;
		top: 830rpx;
		right: 50rpx;
		
		image{
			width: 90rpx;
			height: 90rpx;
		}
	}
	.rule{
		position: absolute;
		top: 830rpx;
		left: 50rpx;
		
		@include column-center;
		
		image{
			width: 90rpx;
			height: 90rpx;
		}
		text{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 6rpx;
		}
	}
	.energy{
		/* display: flex;
		position: relative;
		flex-direction: column; */
		@include column-center;
		.price{
			position: relative;
			margin-top: -95rpx;
			font-size: 40rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #000000;
			text-shadow: 2rpx 2rpx 4rpx rgba(4, 4, 4, 0.5);
			text-align: center;
			
		}
		
		&_nengliang{
			width: 558rpx;
			height: 200rpx;
			position: relative;
			
			image{
				@include img;
				position: absolute;
				top: -35rpx;
				left: 50%;
				transform: translateX(-50%);
			}
			text{
				width: 238rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #B557F7;
				position: absolute;
				top: 8rpx;
				left: 50%;
				transform: translateX(-50%);
				text-align: center;
			}
		}
		&_progress{
			width: 440rpx;
			height: 24rpx;
			background: rgba(255, 255, 255, 0.49);
			box-shadow: 0 2rpx 4rpx 2rpx rgba(105, 22, 255, 0.29);
			border-radius: 28rpx;
			border: 2rpx solid #FFFFFF;
			position: relative;
			
			&::after{
				content: '';
				width: 235rpx;
				height: 21rpx;
				background: linear-gradient(86deg, #00E9FF 0%, #985FFF 100%);
				border-radius: 28rpx;
				position: absolute;
				top: 0rpx;
				left: 0;
			}
		}
	}
	.box{
		padding: 30rpx 54rpx;
		@include between;
		
		&_more{
			@include column-center;
			
			image{
				width: 130rpx;
				height:130rpx;
			}
			text{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		&_openbtn{
			width: 450rpx;
			height: 150rpx;
			@include center;
			
			image{
				@include img;
			}
		}
	}
	.buytip{
		@include center-start;
		margin-top: 40rpx;
		
		image{
			width: 50rpx;
			height: 50rpx;
		}
		text{
			width: 438rpx;
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 1.5;
		}
	}
	.risktip1{
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		margin-top: 16rpx;
	}
	.risktip2{
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #492AFF;
		text-align: center;
		margin-top: 16rpx;
	}
}
.goodsprice{
	font-size: 40rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #000000;
	text-shadow: 2rpx 2rpx 4rpx rgba(4, 4, 4, 0.5);
	text-align: center;
	margin-top: 16rpx;
}
.goodsSwiper {
	/* margin-top: 50rpx; */
	margin-top: 150rpx;
	
	.swiper-item {
		
		height: 260rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 12rpx;
		padding: 10rpx 7rpx;
		transition: 0.3s;
		border: solid 1rpx rgba(0,0,0,0);
		transform: scale(0.75);
		
		image {
			display: block;
			width: 178rpx;
			height: 180rpx;
		}
		text{
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			display: inline-block;
			width: 100%;
			@include one;
			margin-top: 14rpx;
			text-align: center;
		}
	}
	
	.active {
		
		.swiper-item {
			transition: 0.3s;
			transform: scale(1);
			border: 4rpx solid #FF1200;
			padding: 10rpx 6rpx !important;
		}
	}
}
.all{
	max-height: 60vh;
	
	.allgoods{
		width: 100%;
		background-color: #F5F5F5;
		text-align: center;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		
		&_title{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			margin: 52rpx 0;
		}
		&_close{
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			position: absolute;
			top: 45rpx;
			right: 50rpx;
		}
		&_tag{
			margin: 0 40rpx 38rpx;
			@include between;
			
			text{
				width: 120rpx;
				height: 56rpx;
				border-radius: 28rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
				@include center;
			}
		}
	}
}
.prob{
	width: 750rpx;
	height: 150rpx;
	background: linear-gradient(0deg, #FFD9C2 0%, #FFF8F8 100%);
	position: fixed;
	bottom: 0;
	z-index: 9999;
	
	&_title{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FF5400;
		text-align: center;
		margin-top: 25rpx;
	}
	&_probability{
		height: 100rpx;
		@include around;
		margin: 0 auto 30rpx;
		
		&_item{
			@include column-center;
			
			&_text{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
			}
			&_num{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
			}
		}
	}
}
.goodslist{
	display: flex;
	flex-wrap: wrap;
	margin-top: 56rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	
	.goods{
		width: 210rpx;
		border-radius: 12rpx;
		background: linear-gradient(0deg, #F5FFFF 0%, #FFDCDC 100%);
		margin: 0 30rpx 30rpx 0;
		position: relative;
		
		&:nth-child(3n){
			margin-right: 0;
		}
		
		&_tag{
			width: 143rpx;
			height: 46rpx;
			background: #FF0000;
			border-radius: 12rpx 0;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
		}
		&_pic{
			width: 175rpx;
			height: 175rpx;
			margin: 20rpx 20rpx 0;
		}
		&_price{
			height: 36rpx;
			background: linear-gradient(180deg, #00E8FF 0%, #985FFF 100%);
			border-radius: 12rpx 12rpx 0 0;
			opacity: 0.8;
			padding: 0 8rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			display: inline-block;
			position: absolute;
			top: 211rpx;
			right: 0;
		}
		&_title{
			width: 210rpx;
			height: 124rpx;
			background: #FFFFFF;
			border-radius: 0 0 12rpx 12rpx;
			padding: 24rpx;
			
			text{
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				@include two;
			}
		}
	}
}
.chuanshuo{
	background: linear-gradient(180deg, #FFBF00 0%, #FF7700 100%)!important;
}
.shishi{
	background: linear-gradient(180deg, #FF7900 0%, #FE1F08 100%)!important;
}
.xiyou{
	background: linear-gradient(180deg, #B557F7 0%, #742AFF 100%)!important;
}
.putong{
	background: linear-gradient(360deg, #492AFF 0%, #02E6FF 100%)!important;
}
</style>
